<template>
  <n-config-provider class="z-40 px-2 fixed top-0 animate-sidebar"
                     :style="{ width:'100vw',margin:'0',padding:'0'}"
  >
    <!-- <div class="bg-cover bg-center" style="background-image: url('../../../public/head_1.png');height: 15vh;" /> -->
    <div class="flex">
      <div class="bg-blue-500 text-white ml-24 text-2xl pl-4 pr-4 mr-4">LOGO</div>
      <div class="border-l-2 border-gray-500 h-8" />
    </div>

    <div style="height: 50px;top:35px;z-index: 999;width: 100vw;"
         class="absolute opacity-70 flex items-center "
    >
      <div class="bg-blue-600 h-full flex items-center justify-center " style="width: 50px;">
        <n-icon :size="40" :color="char400"
                @click="showSide"
        >
          <Menu />
        </n-icon>
      </div>

      <div class="text-white flex items-center bg-blue-700 h-full w-full">
        <n-dropdown trigger="hover"
                    placement="bottom-start"
                    :options="projectOptions"
        >
          <div class="nav-box">
            项目空间切换
          </div>
        </n-dropdown>

        <div class="nav-box" :class="{'border-white':name === 'app'}" @click="nav('/display/inTime')">功能应用</div>
        <div class="nav-box" :class="{'border-white':name === 'analysis'}" @click="nav('/analysis')">基础分析</div>
        <div class="nav-box">数据资产</div>
        <div class="nav-box">人工智能</div>
        <div class="nav-box">推理决策</div>
      </div>
    </div>

    <div class=" fixed py-3 animate-sidebar top-20 "
         :style="{ width: `${expandWidth}px`, left: expand ? `-${expandWidth}px` :'0vw' }"
    >
      <n-scrollbar class="pb-20" style="max-height: 85vh;">
        <n-menu :options="menuOptions" :value="value" :indent="15" :on-update:value="onMenuUpdate" />
      </n-scrollbar>
    </div>
    <!-- <div style="height: 47px;" /> -->

    <div v-if="isTelescreen" id="menu" class="w-full top-0 left-0 flex justify-center opacity-90">
      <div class="absolute left-0 top-24">
        <n-space class="py-1 shadow-xl absolute" style="left: 3vw">
          <n-tabs type="card" closable :bar-width="0" size="small" :value="value" tab-style="height: 25px;" :on-close="onClose">
            <n-tab v-for="item in tabs" :name="item.value" :tab="item.label" @click="nav(item.value)">
              {{ item.label }}
            </n-tab>
          </n-tabs>
        </n-space>
      </div>

      <div style="height: 32px; top:0;z-index: 999;right:1vh;"
           class="absolute  flex justify-center items-center cursor-pointer"
      >
        <!-- <n-icon :size="32" :color="char500" class=""><Resize /></n-icon> -->
        <div class="w-8 h-8 rounded-full mr-4">
          <img style="height: 32px;width: 32px;" src="../../../public/1-140305131415.jpg" class="rounded-full object-cover">
        </div>
        <div class="text-black mr-8">Admin</div>
        <div class="border-l-2 border-gray-500 h-8" />
        <div class="p-2">我的应用</div>
        <div class="border-l-2 border-gray-500 h-8 mr-8" />
      </div>
    </div>
    <hr class="absolute right-0 bg-blue-500"
        :style="{ width: expand ? '100vw' : `calc(100vw - ${expandWidth}px)`, left: expand ? '0vw' : `${expandWidth}px` }"
        style="top:140px;z-index: 999;border:none;height:0.5px;"
    >
  </n-config-provider>
</template>

<script lang="ts" setup>
import {
  NIcon, NConfigProvider, NMenu, NScrollbar, NSpace, NTabs ,NTab, NDropdown
} from 'naive-ui'
import {
  Menu, Home
} from '@vicons/ionicons5'
import type { MenuOption } from 'naive-ui'
import { nav, getClientKVCache, setClientKVCache } from '../../shared/client/window'
import { ref, h, onMounted } from 'vue'
import { char400 } from '../../shared/theme/color'

interface Option { label: string, value: string }
const tabs = ref<Option[]>([])
const props = defineProps({
  name: {
    type: String,
    required: true
  },

  value: {
    type: String,
    required: true
  },

  isTelescreen: {
    type: Boolean,
    required: false,
    default: () => false
  }
})

let moduleMapping: Record<string, { label: string, icon: any, children?: any }>

const allMapping = {
  '/display/inTime': { label:'实时数据总览' },
  '/display/trend': { label:'趋势总览' },
  '/display/tab': { label:'用户标签管理' },
  '/display/group': { label:'用户群组' },
  '/display/goods': { label:'商品动销' },
  '/manage/department': { label:'部门管理' },
  '/manage/job': { label:'岗位管理' },
  '/manage/user': { label:'用户管理' },
  '/manage/role': { label:'角色管理' },
  '/analysis': { label: '归因分析' },
}

const appMapping: Record<string, { label: string, icon: any, children?: any }> = {
  '/display/data': { label: '我的总览', icon: Home, children:[
    { label:'实时数据总览',key:'/display/inTime' }, { label:'趋势总览',key:'/display/trend' }
  ] },
  '/display/user': { label: '用户管理', icon: Home, children:[
    { label:'用户标签管理',key:'/display/tab' }, { label:'用户群组',key:'/display/group' }
  ] },
  '/display/Goods': { label: '商品概览', icon: Home, children:[
    { label:'商品动销',key:'/display/goods' }
  ] },
  '/manage': { label: '系统管理', icon: Home, children:[
    { label:'部门管理',key:'/manage/department' },
    { label:'岗位管理',key:'/manage/job' },
    { label:'用户管理',key:'/manage/user' },
    { label:'角色管理',key:'/manage/role' }
  ] }
}

const analysisMapping: Record<string, { label: string, icon: any, children?: any }> = {
  '/analysis': { label: '归因分析', icon: Home }
}

const menuOptions = ref<MenuOption[]>([])

function computeMenuOptions() {
  menuOptions.value = Object.keys(moduleMapping).map(key => ({
    label: moduleMapping[key].label,
    key,
    children: moduleMapping[key]?.children,
    icon: () => h(NIcon, null, { default: () => h(moduleMapping[key].icon) })
  }))
}

const projectOptions = [
  {
    label: '金融物流',
    key: ''
  }
]

onMounted(() => {
  if (!import.meta.env.SSR) {
    if(props.name === 'app')
      moduleMapping = appMapping
    else if (props.name === 'analysis')
      moduleMapping = analysisMapping
    computeMenuOptions()


    const cached: string[] = getClientKVCache('tabs') || []
    if (cached.indexOf(props.value) === -1 && allMapping.hasOwnProperty(props.value))
      cached.push(props.value)
    tabs.value = cached.map(value => ({ label: allMapping[value].label, value }))

    setClientKVCache('tabs', cached)

    showSide()
  }
})



const expandWidth = ref(200)
const expand = ref(false)
function showSide() {
  const menu = document.getElementById('menu')
  const bodyBox = document.getElementById('body-box')
  const bodyBoxChild = document.getElementById('body-box-child')
  if (!menu || !bodyBox || !bodyBoxChild) return


  if (menu.style.left !== `${expandWidth.value}px`) {
    expand.value = false
    menu.style.position = 'fixed'
    menu.style.width = `calc(100vw - ${expandWidth.value}px)`
    menu.style.left = `${expandWidth.value}px`
    bodyBox.style.width = `calc(100vw - ${expandWidth.value }px)`
    bodyBox.style.left = `${expandWidth.value }px`
    bodyBoxChild.style.width = `calc(90vw - ${expandWidth.value * 0.9 }px)`
  } else {
    expand.value = true
    menu.style.position = 'fixed'
    menu.style.width = '100vw'
    menu.style.left = '0vw'
    bodyBox.style.left = '0vw'
    bodyBox.style.width = '100vw'
    bodyBoxChild.style.width = '90vw'
  }



}

function onMenuUpdate(key: string) {
  nav(key)
}

function onClose(key: string) {
  let cached: string[] = getClientKVCache('tabs') || []
  cached = cached.filter(x => x !== key)
  console.log(cached)
  setClientKVCache('tabs', cached)
  nav(cached.length ? cached[cached.length - 1] : '/display/inTime')
}
</script>

<style>
.nav-box {
    padding: 0.5rem;
    margin-left: 2.5rem;
    cursor: pointer;
    border-bottom-width: 2px;
    border-color: transparent;
    transition: border-color 0.3s ease;
  }

.nav-box:hover {
    border-color: white;

}

.animate-sidebar {
  transition: 0.3s all ease;
}

</style>
